<template>
	<scroll-view>
		<view class="container">
			<!-- Toolbar -->
			<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
			<!-- Backdrop -->
			<view class="topBackrop">
				<view :style="{'padding-top':((actionBarHeight)+'px')}"></view>
			</view>
			<!-- 增值服务 -->
			<view class="title" :style="{'padding-top':((actionBarHeight)+'px')}">
				<image class="title-img" mode="widthFix" src="@/static/ic_place_order_title.png"></image>
				<view class="title-text">增值服务</view>
			</view>
			<view class="place-order">
				<!-- 上门提车 -->
				<view class="uni-flex place-order-item" style="background-color: transparent;">
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;">上门提车</view>
					<switch :checked="deliveryMethodSelfChecked" color="#F8D849" style="transform:scale(0.7);"
						@change="deliveryMethodSelf" />
				</view>
				<!-- 提车方式 -->
				<view v-if="deliveryMethod == 1" class="uni-flex place-order-item">
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1; padding-left: 25rpx;">请选择提车方式</view>
					<text class="uni-panel-icon uni-icon place-order-image">{{'&#xe470;'}}</text>
				</view>
				<!-- 提车时间 -->
				<view v-if="deliveryMethod == 1" class="uni-flex place-order-item">
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1; padding-left: 25rpx;">请选择提车时间</view>
					<text class="uni-panel-icon uni-icon place-order-image">{{'&#xe470;'}}</text>
				</view>
				<!-- 送车上门 -->
				<view class="uni-flex place-order-item" style="background-color: transparent;">
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;">送车上门</view>
					<switch :checked="deliveryMethodDeliveryChecked" color="#F8D849" style="transform:scale(0.7);"
						@change="deliveryMethodDelivery" />
				</view>
			</view>
			<!-- 联系人 -->
			<view class="title">
				<image class="title-img" mode="widthFix" src="@/static/ic_place_order_title.png"></image>
				<view class="title-text">联系人</view>
			</view>
			<view class="place-order">
				<!-- 发车联系人名字 -->
				<view class="uni-flex place-order-item">
					<view style="-webkit-flex: 1;flex: 0.1;"></view>
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;">发车联系人</view>
					<view class="input" style="-webkit-flex: 1;flex: 2;">
						<input class="input-text" placeholder="请填写" @focus="onFocus" @blur="onBlur" />
					</view>
				</view>
				<!-- 发车联系人电话 -->
				<view class="uni-flex place-order-item">
					<view style="-webkit-flex: 1;flex: 0.1;"></view>
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;">发车联系人电话</view>
					<view class="input" style="-webkit-flex: 1;flex: 2;">
						<input class="input-text" placeholder="请填写" @focus="onFocus" @blur="onBlur" />
					</view>
				</view>
				<!-- 收联系人名字 -->
				<view class="uni-flex place-order-item">
					<view style="-webkit-flex: 1;flex: 0.1;"></view>
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;">收车联系人</view>
					<view class="input" style="-webkit-flex: 1;flex: 2;">
						<input class="input-text" placeholder="请填写" @focus="onFocus" @blur="onBlur" />
					</view>
				</view>
				<!-- 收联系人电话 -->
				<view class="uni-flex place-order-item">
					<view style="-webkit-flex: 1;flex: 0.1;"></view>
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;">收车联系人电话</view>
					<view class="input" style="-webkit-flex: 1;flex: 2;">
						<input class="input-text" placeholder="请填写" @focus="onFocus" @blur="onBlur" />
					</view>
				</view>
			</view>
			<!-- 运输方式 -->
			<view class="title">
				<image class="title-img" mode="widthFix" src="@/static/ic_place_order_title.png"></image>
				<view class="title-text">运输方式</view>
			</view>
			<!-- 价格表 -->
			<view class="place-order">
				<View class="place-order-item" style="height: auto; background-color: transparent; ">
					<checkbox />
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;color: #292B35;">小板直达</view>
					<view class="place-order-text" style="color: #FF6600;">1100~1800元</view>
				</View>
				<View class="place-order-item" style="height: auto; background-color: transparent;">
					<checkbox />
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;color: #292B35;">联运承运</view>
					<view class="place-order-text" style="color: #FF6600;">800~1100元</view>
				</View>
			</view>
			<view class="submit" @tap="submit">立即下单</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				nvConfig: {
					title: "下单",
					bgColor: "#ffffff",
					color: "#000000",
					fixedAssist: {
						hide: true,
					},
					transparent: {
						initColor: "#000000",
					}
				},
				deliveryMethod: 1,
				deliveryMethodSelfChecked: true,
				deliveryMethodDeliveryChecked: false
			}
		},
		computed: {
			actionBarHeight() {
				return parseInt(88 * uni.getSystemInfoSync().windowWidth / 750) + uni.getSystemInfoSync().statusBarHeight
			}
		},
		methods: {
			deliveryMethodSelf: function(e) {
				var isChecked = e.detail.value
				this.deliveryMethod = isChecked ? 1 : 0
				this.deliveryMethodSelfChecked = isChecked
				if (isChecked) this.deliveryMethodDeliveryChecked = false
			},
			deliveryMethodDelivery: function(e) {
				var isChecked = e.detail.value
				this.deliveryMethod = isChecked ? 2 : 0
				this.deliveryMethodDeliveryChecked = isChecked
				if (isChecked) this.deliveryMethodSelfChecked = false
			},
			onFocus() {
				this.$mp.page.$getAppWebview().setStyle({
					softinputNavBar: 'none'
				})
			},
			onBlur() {
				this.$mp.page.$getAppWebview().setStyle({
					softinputNavBar: 'auto'
				})
			},
			submit() {
				uni.navigateBack();
				uni.showToast({
					title: '下单成功'
				});
			}
		},
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.css';

	page {
		background-color: $uni-bg-color-grey;
	}

	.container {
		/* #ifdef H5 */
		padding-bottom: 150rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: 30rpx;
		/* #endif */
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.topBackrop {
		height: auto;
		width: 100%;
		display: flex;
		padding: 0rpx 30rpx;
		z-index: 99;
		position: fixed;
		flex-direction: column;
		justify-content: flex-end;
		background-image: linear-gradient(to bottom, #F8D849, #FFED9C);
	}

	.title {
		width: 100%;
		height: 89rpx;
		display: flex;
		align-items: center;
	}

	.title-img {
		width: 17rpx;
		margin-left: 60rpx;
	}

	.title-text {
		height: 89rpx;
		display: flex;
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-text-color;
		justify-content: center;
		align-items: center;
	}

	.place-order {
		margin-left: 25rpx;
		margin-right: 25rpx;
		padding: 0rpx 25rpx;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		background-color: white;
		border-radius: 20rpx;
		box-sizing: border-box;
		align-items: center;
	}

	.place-order-item {
		margin-top: 15rpx;
		width: 100%;
		height: 88rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F6F8FA;
	}

	.place-order-image {
		width: 35rpx;
		height: 35rpx;
		padding-left: 20rpx;
		padding-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.place-order-text {
		height: 100%;
		text-align: start;
		color: rgba(88, 90, 97, 0.5);
		padding: 0rpx 6rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}

	.input {
		height: 100%;
		color: #333333;
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.input-text {
		width: 100%;
		padding: 0rpx 30rpx;
		text-align: right;
		font-size: 26rpx;
		color: $uni-text-color;
	}

	.delivery-method-item {
		width: 100%;
		padding: 0rpx 30rpx;
		font-size: 22rpx;
		display: flex;
		align-items: center;
	}

	.submit {
		display: flex;
		justify-content: center;
		margin: 30rpx 65rpx;
		align-items: center;
		height: 90rpx;
		background-color: rgba(248, 216, 73, 1);
		border-radius: 50rpx;
		color: rgba(41, 43, 53, 1);
		font-size: 28rpx;
		font-weight: bold;
	}
</style>